<template>
    <div class="detail">
        <b-container>
            <b-row>
                <div class="card">
                    <div class="info" @click="toHref">< {{tabName}}</div>
                    <div class="title">{{info.title}}</div>
                    <div class="content" v-html="info.content"></div>
                </div>
            </b-row>
        </b-container>
    </div>
</template>

<script>
import { GetDetail } from '@/api'
export default {
	name: 'detail',
	data(){
        return{
            id : '',
            tab: 0,
            tabName: '',
            title: '',
            info: ''
        }
    },
    mounted(){
        this.id = this.$route.query.id
        this.tab = this.$route.query.tab
        this.tabName = this.$t(`news.tabs[${this.tab}]`)
        this.fetchData()
    },
    methods:{
        fetchData(){
            GetDetail({
				id: this.id
			}).then((res)=>{
                this.info = res
			})
        },
        toHref(){
            this.$router.push({
                path:'/news',
                query:{
                    id: this.tab
                }
            })
        }
    }
}
</script>


<style lang="scss" scoped>
.detail{
    padding-top: 125px;
    padding-bottom: 80px;
    background: #f6f7fb;
    .card{
        border: 1px solid #e6e6e6;
        background: #ffffff;
        padding: 0 40px;
        .info{
            height: 60px;
            line-height: 60px;
            font-size: 16px;
            cursor: pointer;
        }
        .title{
            color: #333333;
            font-size: 22px;
            font-weight: bold;
            padding: 12px 0;
            border-top: 1px solid #e6e6e6;
            border-bottom: 1px solid #e6e6e6;
        }
    }
}
</style>
